<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<button class="btn">请求数据</button>
<button class="canceled">取消请求</button>
<ul class="list">
    <!-- <li>昵称：小错，账号：xiaocuo，邮箱：2239222721@qq.com</li> -->
</ul>

<script>
// 需求：点击 btn 发送ajax请求获取用户数据，展示在页面中

let btn = document.querySelector('.btn')
let list = document.querySelector('.list')
let canceled = document.querySelector('.canceled')
let xhr

btn.onclick = function (){
    console.log( '发送请求...' )
    // 1.创建一个数据交互对象(ajax对象、XMLHttpRequest对象)
    xhr = new XMLHttpRequest()

    // 设置超时（指定时间内没有响应就会触发超时）
    // console.log( xhr.timeout )// 默认为0 
    xhr.timeout = 3000 // 毫秒

    // 2.初始化请求（设置请求地址、请求方式等）
    xhr.open('get','http://localhost:8080/users/data',true)

    // 3.将请求发送到服务端
    xhr.send(null)

    // 4.等待 请求和响应 状态改变
    xhr.onreadystatechange = function (){
        //  请求超时
        // console.log( xhr.readyState )// 4
        // console.log( xhr.status )// 0
        if (xhr.readyState === 4) {// 请求完成
            if (xhr.status >= 200 && xhr.status < 300) {
                // 响应成功
                console.log( '响应成功' )
            } else {
                // 响应失败
                console.log( '响应失败' )
            }
        }
    }

    // 请求超时不会触发load事件
    // xhr.onload = function (){
    //     // 加载完成（下载响应体完成）
    //     console.log( xhr.readyState )// 4
    //     console.log( xhr.status )// 200
    //     console.log( xhr.responseText )// 服务端响应的数据
    // }
}

// 点击 取消请求
canceled.onclick = function (){
    console.log( '取消请求...' )
    xhr.abort()// 取消请求
    // 通常在一个请求未完成时，又发送了一个新的请求，此时需要取消第一次未完成的请求
}

</script>
</body>
</html>